<template>
    <div class="pl-5 pr-5 music">
        <h1 class="text-3xl font-bold pt-8 pb-4">音乐馆</h1>
        <Affix target=".music" :offset="56" ref="affixRef" @scroll="handleScroll" @change="handleChange">
            <div class="bg-view">
                <el-tabs v-model="currentMenu" @tab-click="onTabClick">
                    <el-tab-pane v-for="menu in menus" :key="menu.name" :label="menu.label" :name="menu.name"
                                 class="text-main"/>
                </el-tabs>
            </div>
        </Affix>
        <div class="mt-5">
            <RouterView/>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {useMusicMenu} from "@/views/music/MusicController";
    import Affix from "@/components/affix/affix.vue";
    import {shallowRef, ref, onMounted} from "vue";

    const {menus, currentMenu, onTabClick} = useMusicMenu();
    const affixRef = shallowRef<InstanceType<typeof Affix> | null>(null);
    const handleChange = (res: any) => console.log("change", res);
    const handleScroll = (res: any) => {
        affixRef.value.update();
    };
</script>

<style lang="scss">
    .music {
        .el-tabs__nav-wrap::after {
            height: 0;
        }

        .el-tabs__header {
            @apply m-0;
        }
    }
</style>
